<template>
    <div>
        <router-link to="/detail" tag="div" v-for="(item, index) of list" :key="index" class="box border-bottom">
            <img class="img" :src="item.imgUrl">
            <div class="info">
                <p class="title">{{item.title}}</p>
                <p class="desc">{{item.desc}}</p>
                <input type="button" value="查看详情">
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "Recommend",
        props: {
            list: Array
        },
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .box
        display: flex
        margin: .1rem
        color: $darkTextColor
        font-size: $normalTextSize
        line-height: $normalTextSize+.2rem
        .img
            width: 2rem
            height: 2rem
        .info
            float: right
            flex: 1
            min-width: 0
            margin: 0 0 0 .1rem
            .title
                font-size: $normalTextSize+.08rem
                ellipsis()
            .desc
                ellipsis()
</style>